<template>
  <div id="tencentMapBox">
    这是一个腾讯地图演示版本
    <div id="container" />
    <div id="info">
      当前点击坐标为：
      <span v-if="isClick" id="position">{{
        clickLocaltion.lat + "," + clickLocaltion.lng
      }}</span>
      <span v-else>事件解除了</span>
    </div>
    <div id="button-box">
      <el-button type="primary" @click="getLocation">定位到当前位置</el-button>
      <el-button
        type="primary"
        @click="getInitCenterLocation"
      >定位到初始化位置</el-button>
      <el-button
        type="primary"
        @click="getCenterLoaction"
      >定位中心点</el-button>
      <el-button
        type="primary"
        @click="offClick"
      >解除/绑定鼠标点击事件</el-button>
      <el-button type="primary" @click="hiddenTest">隐藏/显示文字</el-button>
    </div>
  </div>
</template>

<script>
/* eslint-disable no-undef */
export default {
  name: 'TencentMapGetLocation',
  data() {
    return {
      map: null,
      temp: null,
      initCenter: {
        lat: 39.984120,
        lng: 116.307484
      },
      clickLocaltion: {
        lat: null,
        lng: null
      },
      isClick: true,
      showTest: true
    }
  },
  created() {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    initMap() {
      const { lat, lng } = this.initCenter
      const e = new this.$Map.LatLng(lat, lng)
      this.temp = document.getElementById('container')
      this.map = new TMap.Map(this.temp, {
        center: e, // 设置地图中心点坐标
        zoom: 17.2, // 设置地图缩放级别
        pitch: 43.5, // 设置俯仰角
        rotation: 45 // 设置地图旋转角度
      })
      this.mapOnClick()
    },
    offClick() {
      if (this.isClick) {
        this.map.off('click', this.click)
      } else {
        this.mapOnClick()
      }
      this.isClick = !this.isClick
    },
    // 地图添加点击事件
    mapOnClick() {
      this.map.on('click', this.click)
    },
    click(evt) {
      this.clickLocaltion.lat = evt.latLng.getLat().toFixed(6)
      this.clickLocaltion.lng = evt.latLng.getLng().toFixed(6)
    },
    // 获取当前定位
    getLocation() {
      this.$Location.getLocation(this.sucCallback, this.errCallback, { timeout: 5000 })
    },
    // 定位到初始化位置
    getInitCenterLocation() {
      const { lat, lng } = this.initCenter
      this.map.setCenter(new TMap.LatLng(lat, lng))
    },
    // 定位中心点
    async getCenterLoaction() {
      const centerLatLng = await this.map.getCenter()
      alert('当前坐标为' + JSON.stringify(centerLatLng))
    },
    sucCallback(res) {
      console.log(res, this.map, 'res')
      const { lat, lng } = res
      this.map.setCenter(new TMap.LatLng(lat, lng))
      this.map.setZoom('17.2')
    },
    errCallback(err) {
      console.log(err, 'err')
    },
    // 隐藏文字
    hiddenTest() {
      this.resetDom()
      if (this.showTest) {
        this.hiddentestMap()
      } else {
        this.initMap()
      }
      this.showTest = !this.showTest
    },
    hiddentestMap() {
      const { lat, lng } = this.initCenter
      const e = new this.$Map.LatLng(lat, lng)
      this.map = new TMap.Map(this.temp, {
        center: e, // 设置地图中心点坐标
        zoom: 17.2, // 设置地图缩放级别
        pitch: 43.5, // 设置俯仰角
        rotation: 45, // 设置地图旋转角度
        baseMap: {
          type: 'vector',
          features: ['base', 'building3d'] // 隐藏矢量文字
        }
      })
    },
    resetDom() {
      this.temp.remove()
      const tencentMapBox = document.getElementById('tencentMapBox')
      this.temp = document.createElement('div')
      this.temp.id = 'container'
      tencentMapBox.insertBefore(this.temp, tencentMapBox.childNodes[0])
    }
  }
}
</script>

<style  lang="less">
#info {
  position: absolute;
  left: 20px;
  top: 20px;
  font-size: 14px;
  background: #fff;
  width: 270px;
  padding: 10px;
  border-radius: 3px;
}
</style>
